<template>
    <view class="content">
        <a-demo title="基础使用">
            <view class="swiper" :class="indicatorPosition">
                <pure-swiper
                    :list="list"
                    :current="current3"
                    autoplay
                    circular
                    @change="(e) => (current3 = e.detail.current)">
                </pure-swiper>
                <pure-indicator
                    :list="list"
                    :count="list.length"
                    :current="current3"
                    :mode="indicatorMode"
                    :separator="separator"
                    @onClick="(index) => (current3 = index)"></pure-indicator>
            </view>
        </a-demo>

        <a-demo title="模式">
            <pure-radio-group v-model="indicatorMode">
                <pure-radio
                    v-for="radio in indicatorModes"
                    :value="radio.value"
                    :label="radio.label"
                    :key="radio.value"></pure-radio>
            </pure-radio-group>
        </a-demo>

        <a-demo title="位置">
            <pure-radio-group v-model="indicatorPosition">
                <pure-radio
                    v-for="radio in indicatorPositions"
                    :value="radio.value"
                    :label="radio.label"
                    :key="radio.value"></pure-radio>
            </pure-radio-group>
        </a-demo>

        <a-demo title="静态模式">
            <pure-swiper
                :list="list"
                :current="current7"
                circular
                @change="(e) => (current7 = e.detail.current)">
            </pure-swiper>
            <view class="indicator pure-indicator-static">
                <pure-indicator
                    :list="list"
                    :count="list.length"
                    :current="current7"
                    :mode="indicatorMode"
                    :separator="separator"
                    @onClick="(index) => (current7 = index)"></pure-indicator>
            </view>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref, computed } from "vue";

    // 数据
    const list = ref([
        { title: "第二项", src: "/static/placeholder.jpg", title: "第一项标题" },
        { title: "第三项", src: "/static/placeholder.jpg", title: "第二项标题" },
        { title: "第四项", src: "/static/placeholder.jpg", title: "第三项标题" },
    ]);
    const current3 = ref(0);
    const current7 = ref(0);

    // 指示器模式
    const indicatorModes = ref([
        { label: "圆点模式", value: "dot" },
        { label: "条状模式", value: "bar" },
        { label: "线模式", value: "line" },
        { label: "数字模式", value: "number" },
        { label: "索引模式", value: "index" },
        { label: "标题模式", value: "title" },
        { label: "进度模式", value: "progress" },
    ]);
    const indicatorMode = ref("dot");

    // 指示器位置
    const indicatorPositions = ref([
        { label: "底部居中", value: "pure-indicator-bottom-center" },
        { label: "底部居左", value: "pure-indicator-bottom-left" },
        { label: "底部居右", value: "pure-indicator-bottom-right" },
        { label: "顶部居中", value: "pure-indicator-top-center" },
        { label: "顶部居左", value: "pure-indicator-top-left" },
        { label: "顶部居右", value: "pure-indicator-top-right" },
        { label: "左侧居中", value: "pure-indicator-left-center" },
        { label: "左侧居上", value: "pure-indicator-left-top" },
        { label: "左侧居下", value: "pure-indicator-left-bottom" },
        { label: "右侧居中", value: "pure-indicator-right-center" },
        { label: "右侧居上", value: "pure-indicator-right-top" },
        { label: "右侧居下", value: "pure-indicator-right-bottom" },
    ]);
    const indicatorPosition = ref("pure-indicator-bottom-center");
    const separator = computed(() => {
        if (
            [
                "pure-indicator-bottom-center",
                "pure-indicator-bottom-left",
                "pure-indicator-bottom-right",
                "pure-indicator-top-center",
                "pure-indicator-top-left",
                "pure-indicator-top-right",
            ].includes(indicatorPosition.value)
        )
            return "/";
        return "-";
    });
</script>

<style scoped>
    .swiper {
        position: relative;
    }

    .indicator {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
</style>
